<template>
  <div class="progress-bar">
    <div v-for="(item, index) in datas" :key="index" class="progress-bar-item">
      <div class="infos">
        <div class="title">
          {{ item.title }}
        </div>
        <div class="number">
          <template v-if="item.title === '车位利用率'">
            {{ item.value }}%
          </template>
          <template v-else>
            {{ item.value }}
          </template>
        </div>
      </div>
      <div class="bar">
        <template v-if="item.title === '车位利用率'">
          <div class="bar-highlight" :style="{ width: `${Math.min(item.value / 100 * 100, 100)}%` }">
            <div class="point" />
          </div>
        </template>
        <div v-else class="bar-highlight" :style="{ width: `${Math.min(item.value / max * 100, 100)}%` }">
          <div class="point" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// eslint-disable-next-line no-undef
defineProps({
  datas: {
    type: Array,
    default: () => [],
  },
  max: {
    type: Number,
    default: 100,
  },
});
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
